<template>
  <div class="caps-pages">
    <div class="container1" ref="fundChartCap"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        plantCap:[{name:'河北',value:200},{name:'湖南',value:9},{name:'四川',value:20},{name:'广东',value:15},{name:'北京',value:10}],
        datalist: [
          {
            offset: [75, 70],
            symbolSize: 80,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#A370FF" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#5B00FF" // 100% 处的颜色
                }
              ],
              global: false
            }
          },
          {
            offset: [95, 30],
            symbolSize: 85,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#578FFF" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#1259E6" // 100% 处的颜色
                }
              ],
              global: false
            }
          },
          {
            offset: [10, 63],
            symbolSize: 80,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#C052DB" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#8C39A0" // 100% 处的颜色
                }
              ],
              global: false
            }
          },
          {
            offset: [25, 23],
            symbolSize: 65,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#0EA2FB" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#065BF5" // 100% 处的颜色
                }
              ],
              global: false
            }
          },
          {
            offset: [50, 53],
            symbolSize: 80,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#0EA2FB" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#065BF5" // 100% 处的颜色
                }
              ],
              global: false
            }
          }
        ],
      }
    },
    mounted () {
      this.initChart();
    },
    methods: {
      initChart() {
        var that = this;
        var myChartDom = that.$refs.fundChartCap;
        var chartView1 = that.$echarts.init(myChartDom);
        var datas = [];
        for (var i = 0; i < that.plantCap.length; i++) {
          var item = that.plantCap[i];
          var itemToStyle = that.datalist[i];
          datas.push({
            name: item.name + "\n" + item.value,
            value: itemToStyle.offset,
            symbolSize: itemToStyle.symbolSize,
            label: {
              align: "center",
              formatter: [
                "{b|" + item.name + "}",
                "{c|● " + item.value + "}"
              ].join("\n"),
              rich: {
                a: {
                  color: "#C2E4FF"
                },
                b: {
                  color: "#F8E71C",
                  padding: [5, 0, 5, 0]
                },
                c: {
                  color: "#50E3C2"
                }
              }
            },
            itemStyle: {
              normal: {
                color: itemToStyle.color
              }
            }
          });
        }
        let option = {
          legend: {
            show: true,
            top: 10,
            left: "right",
            data: ["省份", "单量"],
            itemWidth: 14,
            itemHeight: 10,
            textStyle: {
              fontSize: "12",
              color: ["#F8E71C", "#50E3C2"]
            }
          },
          grid: {
            show: false,
            top: 10,
            bottom: 10
          },
          xAxis: [
            {
              gridIndex: 0,
              type: "value",
              show: false,
              min: 0,
              max: 100,
              nameLocation: "middle",
              nameGap: 5
            }
          ],
          yAxis: [
            {
              gridIndex: 0,
              min: 0,
              show: false,
              max: 100,
              nameLocation: "middle",
              nameGap: 30
            }
          ],
          series: [
            {
              name: "省份",
              type: "scatter",
              symbol: "circle",
              symbolSize: 120,
              label: {
                normal: {
                  show: true,
                  formatter: "{b}",
                  color: "#C2E4FF",
                  textStyle: {
                    fontSize: "8"
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: "#F8E71C"
                }
              },
              data: datas
            },
            {
              name: "单量",
              type: "scatter",
              symbol: "circle",
              symbolSize: 120,
              label: {
                normal: {
                  show: true,
                  formatter: "{b}",
                  color: "#C2E4FF",
                  textStyle: {
                    fontSize: "8"
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: "#50E3C2"
                }
              }
            }
          ]
        };
        chartView1.setOption(option);
      }
    },
  }
</script>

<style lang="scss" scoped>
.caps-pages{
  width: 1200px;
  height: 500px;
  margin: 0 auto;
  .container1{
    width: 100%;
    height: 100%;
  }
}
</style>